import React, { ReactElement } from 'react'
import { CartProductType } from '@/models/types'
import { Card, WhiteSpace } from 'antd-mobile'
import styles from './index.less'
import classnames from 'classnames'
interface Props {
    data: CartProductType[]
}

function List({ data }: Props): ReactElement {
    return (
        <div className={styles.main}>
            {data.length && data.map((product: CartProductType) => (
                <Node key={product.id} {...product}></Node>
            ))}
        </div>
    )
}
const Node: React.FC<CartProductType> = ({ title, img, price, count }) => {
    /**
     * Card
     */
    return <>
        <WhiteSpace size='lg'></WhiteSpace>
        <Card className={styles.node}>
            <div className={styles.imgBox}>
                <img src={img} alt={title} />
            </div>
            <div className={styles.right}>
                <div className={classnames('twoRows')}>{title}</div>
                <div className={styles.info}>
                    <p className={classnames('red', 'font14')}>${price}</p>
                    <span className='font12'>x{count}</span>
                </div>
            </div>
        </Card>
    </>

}
export default List
